<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<title>缴费</title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<script>
		var projectName ="${pageContext.request.contextPath}";
		var vendorIds = "${vendorIds}";
		</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/pay.js"></script>
	<style>
		.pagination.square {
			margin: 0; /* 去除外边距*/
			}
			
			.pagination.square > li > a,
			.pagination.square > li > span {
				margin: 0 5px;
				border: 1px solid #dddddd; /* 设置所有的边框都为1像素*/
			}
			.pagination.square > li:first-child > a,
			.pagination.square > li:first-child > span,
			.pagination.square > li:last-child > a,
			.pagination.square > li:last-child > span {
				margin-left: 0px;
				padding-left: 10px;
				padding-right: 10px;
				border-radius: 0px; /* 取消圆角*/
			}
		.abc tr{
			height: 26px;
		}
		.next-page,.pre-page{
			color:#337ab7;
		    border: 1px solid #dddddd;
		    float: left;
		    padding: 0px 10px;
		    height:34px;
		    line-height:34px;
			margin:0 10px  0px 5px;
		}
		.next-page:hover,.pre-page:hover{
			cursor:pointer;
			background-color: #eee;
		    color: #23527c;
		}
		.first-page,.finally-page{
			color:#337ab7;
		    border: 1px solid #dddddd;
		    float: left;
		    padding: 0px 10px;
		    height:34px;
		    line-height:34px;
			margin:0 10px  0px 5px;
		}
		.first-page:hover,.finally-page:hover{
			cursor:pointer;
			background-color: #eee;
		    color: #23527c;
		}
	</style>
	</head>
	<body>
	<!-- Modal1 支付 -->
		<div class="modal fade" id="newPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Payment page</h4>
		      </div>
		      <div class="modal-body">
		    	<form class="form-horizontal">
		    		<table id="Zhangdan" class="table table-bordered table-hover">
						<thead>
							<tr class="zhangdan">
								<td class="col-sm-2 control-label" style="text-align:left">供货商</td>
								<td class="col-sm-2 control-label" style="text-align:left">账单日期</td>
								<td class="col-sm-2 control-label" style="text-align:left">过期日期</td>
								<td class="col-sm-4 control-label" style="text-align:left">支票号</td>
								<td class="col-sm-2 control-label" style="text-align:left"><input type="checkbox" />Paid Flag</td>
							</tr>
						</thead>
						<c:forEach items="${datas['bill']}" var="bill">
							<tbody class="abc">
								<tr>
									<td billId="${bill.id}">${bill.vendor }</td>
									<td>${bill.billDate }</td>
									<td>${bill.billDueDate }</td>
									<td><input type="text" class="form-control content-check" id="Check"></td>
									<td class="text-center"><input type="checkbox" class="paidFlag-checkbox" />paidFlag</td>
								</tr>
							</tbody>
						</c:forEach>
					</table>
		    	</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-success" id="payBill">支付</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<h2 style="text-align: center;">缴费管理</h2>
		<div class="panel panel-default">
			<div class="panel-heading clearfix">
				<div class="pull-left">
					<a type="button" class="btn btn-default" href="${pageContext.request.contextPath}/zal.do?method=1">返回</a>
					<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp" data-backdrop="static" id="address">Submit</button>
					<select class="btn btn-default dropdown-toggle" id="VendorSpinner"></select>
				</div>
			</div>
			
			
		<table id="List" class="table table-bordered table-hover">
			<thead>
				<tr class="shouru">
					<td class="col-sm-2 control-label">供货商</td>
					<td class="col-sm-2 control-label">账单日期</td>
					<td class="col-sm-2 control-label">账单过期日期</td>
					<td class="col-sm-2 control-label">总额</td>
					<td class="col-sm-2 control-label">是否支付</td>
					<td class="col-sm-2 control-label">支付方式</td>
				</tr>
			</thead>
			<c:forEach items="${datas['bill']}" var="bill">
			<tbody class="abc">
				<tr>
					<td>${bill.vendor }</td>
					<td>${bill.billDate }</td>
					<td>${bill.billDueDate }</td>
					<td>${bill.sum }</td>
					<td>${bill.whetherToPay }</td>
					<td>${bill.paymentMethod }</td>
				</tr>
			</tbody>
			</c:forEach>
		</table>
		
		<ul class="list-group">
			<li class="list-group-item">
				<ul class="pagination square">
					<li class="first-page" onclick="toDataPage(1)">首页</li>
					<li class="pre-page"  onclick="toDataPage(${page.currentPage-1})">上一页</li>
					<li class="next-page" onclick="toDataPage(${page.currentPage+1})">下一页</li>
					<li class="finally-page" onclick="toDataPage(${page.totalPage})">尾页</li>
				</ul>
			</li>
		</ul>
		</div>
	</body>
</html>